<template>
  <div>
    <h4>Fugl-Meyer</h4>
    <el-row type="flex" justify="space-between">
      <el-col :span="5">
        <div>
          <el-button type="primary" @click="dialogVisible = true">填写《Fugl-Meyer运动功能评分表》</el-button>
        </div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-input v-model="pgForm.fugl_meyer_input1" placeholder="" readonly style="width: 60%;"></el-input><span> 分</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-input v-model="pgForm.fugl_meyer_input2" placeholder="" readonly></el-input>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="查看表单"
      :visible.sync="dialogVisible"
      width="60%"
      center
      :before-close="handleClose">

      <h4>平衡功能评定</h4>
      <el-row>
        <el-col>
          <span>Ⅰ无支撑坐位</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList1">
              <el-checkbox label="0">不能保持坐位</el-checkbox>
              <el-checkbox label="1">能坐，但少于5min</el-checkbox>
              <el-checkbox label="2">能坚持坐5min</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input3" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅱ 健侧"展翅"反应</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList2">
              <el-checkbox label="0">肩部无外展或肘关节无伸展</el-checkbox>
              <el-checkbox label="1">反应减弱</el-checkbox>
              <el-checkbox label="2">反应正常</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input4" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅲ 患侧“展翅”反应</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList3">
              <el-checkbox label="0">肩部无外展或肘时关节无伸展</el-checkbox>
              <el-checkbox label="1">反应减弱</el-checkbox>
              <el-checkbox label="2">反应正常</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input5" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅳ 支撑站位</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList4">
              <el-checkbox label="0">不能站立</el-checkbox>
              <el-checkbox label="1">在他人的最大支撑下可站立</el-checkbox>
              <el-checkbox label="2">由他人稍给支撑即能站立1min</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input6" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅴ 无支撑站立</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList5">
              <el-checkbox label="0">不能站立</el-checkbox>
              <el-checkbox label="1">不能站立1min或身体摇晃</el-checkbox>
              <el-checkbox label="2">能平衡站立1minl以上</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input7" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅵ 健侧站立</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList6">
              <el-checkbox label="0">不能维持1~2s</el-checkbox>
              <el-checkbox label="1">平衡站稳达4~9s</el-checkbox>
              <el-checkbox label="2">平衡站立超过10s</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input8" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>Ⅶ 患侧站立</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.fugl_meyer_checkList7">
              <el-checkbox label="0">不能维持1~2s</el-checkbox>
              <el-checkbox label="1">平衡站稳达4~9s</el-checkbox>
              <el-checkbox label="2">平衡站立超过10s</el-checkbox>
              <el-input v-model="pgForm.fugl_meyer_input9" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>总分：</span><el-tag type="success" size="medium">{{ sum }}</el-tag>
        </el-col>
      </el-row>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queDing">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "fugl_meyer",
  title: 'Fugl-Meyer平衡功能评定',
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data(){
    return{
      dialogVisible: false,
      pgForm: {
        fugl_meyer_input1: '',
        fugl_meyer_input2: '',
        fugl_meyer_input3: '',
        fugl_meyer_input4: '',
        fugl_meyer_input5: '',
        fugl_meyer_input6: '',
        fugl_meyer_input7: '',
        fugl_meyer_input8: '',
        fugl_meyer_input9: '',
        fugl_meyer_checkList1: [],
        fugl_meyer_checkList2: [],
        fugl_meyer_checkList3: [],
        fugl_meyer_checkList4: [],
        fugl_meyer_checkList5: [],
        fugl_meyer_checkList6: [],
        fugl_meyer_checkList7: [],
      }
    }
  },
  methods: {
    queDing(){
      this.dialogVisible = false;
      this.pgForm.fugl_meyer_input1 = this.sum;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.pgForm.fugl_meyer_input1 = '';
          this.pgForm.fugl_meyer_input2 = '';
          this.pgForm.fugl_meyer_input3 = '';
          this.pgForm.fugl_meyer_input4 = '';
          this.pgForm.fugl_meyer_input5 = '';
          this.pgForm.fugl_meyer_input6 = '';
          this.pgForm.fugl_meyer_input7 = '';
          this.pgForm.fugl_meyer_input8 = '';
          this.pgForm.fugl_meyer_input9 = '';
          this.pgForm.fugl_meyer_checkList1 = [];
          this.pgForm.fugl_meyer_checkList2 = [];
          this.pgForm.fugl_meyer_checkList3 = [];
          this.pgForm.fugl_meyer_checkList4 = [];
          this.pgForm.fugl_meyer_checkList5 = [];
          this.pgForm.fugl_meyer_checkList6 = [];
          this.pgForm.fugl_meyer_checkList7 = [];
          done();
        })
        .catch(_ => {});
    }
  },
  computed: {
    sum(){
      let list = this.pgForm.fugl_meyer_checkList1.concat(this.pgForm.fugl_meyer_checkList2,this.pgForm.fugl_meyer_checkList3,this.pgForm.fugl_meyer_checkList4,this.pgForm.fugl_meyer_checkList5,this.pgForm.fugl_meyer_checkList6,this.pgForm.fugl_meyer_checkList7);
      let sum = 0;
      list.forEach(item => {
        sum += (item)*1;
      })
      return sum;
    }
  }
}
</script>

<style scoped>
.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}
.el-col {
  margin:10px 0;
}
.el-checkbox-group{
  padding: 10px 20px;
}
.el-checkbox{
  display: block;
  margin-bottom: 15px;
}

</style>
